<template>
	<view class="aiDraw">
		<view class="bigTitle">AI绘画</view>
		<customTitle>输入关键词</customTitle>
		<view class="itemBody">
			<textarea v-model="keywords" class="keywords" maxlength='500' placeholder="输入画面描述语，例如:易搜飞船行在巨大的气态行轨道上，旁边是无数飞船的残骸， (多个关键词以逗号隔开)" ></textarea>
			<view class="count">{{keywords.length}}/500</view>
		</view>
		<view class="handle">
			<view class="quickText" @click="getQuickKeywords">
				点这里试试推荐词吧
				<image src="/static/refresh.png" mode="" class="icon"></image>
			</view>
			<view class="audioBtn" @longpress="startRecord" @touchend="stopRecord">
				<image src="/static/maik.png" mode="" class="icon"></image>长按说话
			</view>
		</view>
		<!-- 录音控件 -->
		<recording ref="recording"></recording>
		
		<customTitle>选择风格</customTitle>
		<view class="styles">
			<view class="styleItem" v-for="(item,index) in styles" :key="index" @click="chooseStyle(item)">
				<view class="cont">
					<squareBox :ratio='162/184'>
						<image class="img" :class="{active: item.styleEn === styleActive}" :src="item.imgUrl" mode="aspectFill"></image>
					</squareBox>
					<view class="styleName">
						{{item.style}}
					</view>
				</view>
			</view>
		</view>
		
		<customTitle>参照图<text class="small">(可选)</text></customTitle>
		<view class="upload" @click="toUploadImg">
			<image class="uploadedImg" :src="uploadedImg" mode="widthFix" v-if="uploadedImg"></image>
			<view class="delete" v-if="uploadedImg" @click.stop='uploadedImg = ""'>
				<u-icon name="trash" color="red" size="25"></u-icon>
			</view>
			<view class="uploadPlaceholder" v-else>
				<image src="../../static/imgPlaceholder.png" class="img" mode=""></image>上传图片
			</view>
		</view>
		<uploadImg ref="uploadImg"></uploadImg>
	
		<customTitle>图片比例</customTitle>
		<view class="ratios">
			<view class="ratiosItem" v-for="(item,index) in ratios" :key="index">
				<view class="cont" :class="{active: imgType === item.id}" @click="chooseRatio(item)">
					<squareBox :ratio='220/154'>
						<view class="ratioName">
							{{item.name}}
						</view>
					</squareBox>
				</view>
			</view>
		</view>
		
		<customTitle>图片质量</customTitle>
		<view class="ratios">
			<view class="ratiosItem" v-for="(item,index) in quality" :key="index">
				<view class="cont" :class="{active: picType === item.id}" @click="chooseQuality(item)">
					<squareBox :ratio='266/78'>
						<view class="ratioName">
							{{item.name}}
						</view>
					</squareBox>
				</view>
			</view>
		</view>
		
		<view class="create" @click="create">生成绘画</view>
		<safeBottom></safeBottom>
		<u-popup :show="showResult" mode="center" bgColor='transparent'>
			<view class="popbg">
				<image :src="result" mode="widthFix" class="bgPng"></image>
				<view class="">
					长按保存
				</view>
			</view>
			<view class="center">
				<u-icon name="close" color="#ffffff" size="42" @click="closeResult"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				result: '',
				showResult: false,//展示ai结果
				keywords:'',
				styles:[],
				styleActive: '',
				uploadedImg:'',//已上传的图片
				// 1.高清 2.超高清 3.精绘
				// private Integer picType;
				quality:[{id:1,name:'高清'},{id:2,name:'超高清'},{id:3,name:'精绘'}],
				picType: 2,
				// 1.横图 2.竖图 3.正方形
				// private Integer imgType;
				ratios:[{id:1,name:'竖图'},{id:2,name:'横图'},{id:3,name:'正方形'}],
				imgType: 1
			};
		},
		onLoad() {
			this.getStyles()
		},
		methods: {
			// 查看结果
			closeResult() {
				this.showResult = false;
			},
			// 生成绘画
			create() {
				if(!this.keywords) {
					uni.showToast({
						title: "请输入关键词！",
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:'绘画生成中...',
					mask: true
				})
				this.$request({
					url:'/api/v1/miletus/img/ai/base',
					method:'post',
					data: {
						keyword: this.keywords,
						style: this.styleActive,
						imgType: this.imgType,
						picType: this.picType,
						imgUrl: this.uploadedImg || undefined,
					}
				}).then(res => {
					this.result = res[0]
					this.showResult = true;
					uni.hideLoading()
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 选择风格
			chooseStyle(item) {
				this.styleActive = item.styleEn
			},
			// 选择图片质量
			chooseQuality(item) {
				this.picType = item.id
			},
			// 选择比例
			chooseRatio(item) {
				this.imgType = item.id
			},
			// 选择图片上传
			toUploadImg() {
				this.$refs.uploadImg.upload(url => {
					this.uploadedImg = url
					this.$forceUpdate()
				})
			},
			// 长按启用麦克风说话
			startRecord() {
				this.$refs.recording.start()
			},
			// 录音完毕
			stopRecord() {
				this.$refs.recording.stop()
			},
			// 随机推荐词
			getQuickKeywords() {
				this.$request({
					url:'/api/v1/miletus/img/ai/random/spell',
					method:'get'
				}).then(res => {
					this.keywords = res[0]
				})
			},
			// 获取风格列表
			getStyles() {
				this.$request({
					url:'/api/v1/miletus/img/ai/style',
					method:'get'
				}).then(res => {
					this.styles = res
					if(!this.styleActive) {
						this.styleActive = res[0].styleEn
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.aiDraw {
	padding: var(--status-bar-height) 30rpx 30rpx;
	.bigTitle {
		font-size: 47rpx;
		font-weight: 600;
		color: #fff;
		padding: 20rpx 0 30rpx;
	}
	.itemBody {
		margin-top: 14rpx;
		font-size: 28rpx;
		line-height: 1.8;
		color: #FFFFFF;
		background: rgba(42,43,61,0.6);
		box-shadow: 0 0 13rpx 0 rgba(0,0,0,0.51);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		padding: 20rpx 20rpx 10rpx;
		.keywords {
			width: 100%;
			height: 170rpx;
			font-size: 28rpx;
			line-height: 1.8;
			color: #FFFFFF;
		}
		.count {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 0.5);
			text-align: right;
		}
	}
	.handle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		.quickText {
			font-size: 26rpx;
			color: rgba(#34ECDC, 0.7);
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.icon {
				$s: 26rpx;
				width: $s;
				height: $s;
				margin-left: 15rpx;
			}
		}
		.audioBtn {
			margin-left: auto;
			width: 262rpx;
			height: 76rpx;
			background: linear-gradient(0deg, #32ECE0 0%, #57E78B 100%);
			border-radius: 38rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000002;
			font-size: 28rpx;
			.icon {
				width: 30rpx;
				height: 37rpx;
				margin-right: 10rpx;
			}
		}
	}
	.styles {
		margin-top: 20rpx;
		@include row(21rpx);
		.styleItem {
			@include col(6,21rpx);
			.cont {
				margin-bottom: 40rpx;
				.img {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					&.active {
						border: 2px solid #56E78D;
					}
				}
				.styleName {
					$h: 24rpx;
					height: $h;
					line-height: $h;
					margin-top: 20rpx;
					text-align: center;
					color: #fff;
					font-size: 24rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
	.ratios {
		margin-top: 20rpx;
		margin-bottom: 40rpx;
		@include row(21rpx);
		.ratiosItem {
			@include col(8,21rpx);
			.cont {
				border: 2rpx solid #56E78D;
				border-radius: 20rpx;
				&.active {
					background: linear-gradient(0deg, #33ECDC 0%, #56E78D 100%);
					.ratioName {
						color: #000002;
					}
				}
				.ratioName {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
	}
	.create {
		$h: 76rpx;
		margin: 60rpx auto;
		font-size: 32rpx;
		text-align: center;
		line-height: $h;
		color: #000002;
		width: 672rpx;
		height: $h;
		background: linear-gradient(0deg, #32ECE0 0%, #57E78B 100%);
		border-radius: math.div($h,2);
	}
	.small {
		font-size: 22rpx;
	}
	.upload {
		background: rgba(42,43,61,0.6);
		box-shadow: 0 0 13rpx 0 rgba(0,0,0,0.51);
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
		padding: 20rpx;
		position: relative;
		.uploadedImg {
			width: 100%;
		}
		.delete {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}
		.uploadPlaceholder {
			height: 260rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			color: #fff;
			.img {
				width: 62rpx;
				height:52rpx;
				margin-right: 15rpx;
			}
		}
	}
	
	.popbg {
		text-align: center;
		position: relative;
		.bgPng {
			width: 490rpx;
			height: 634rpx;
		}
		.textArea {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			.big {
				padding-top: 154rpx;
				font-size: 50rpx;
				color: #fff;
				margin-bottom: 38px;
				line-height: 1;
				text-shadow: 0px 3px 8px #0DA760;
				letter-spacing: 2px;
				white-space: nowrap;
			}
			.small {
				font-size: 34rpx;
				color: #fff;
				line-height: 1;
				margin-bottom: 20rpx;
			}
			.open {
				width: 290rpx;
				$h: 93rpx;
				height: $h;
				line-height: $h;
				border-radius: math.div($h,2);
				background-color: #fff;
				color: #27BD5C;
				font-size: 48rpx;
				text-align: center;
				margin: 90rpx auto 0;
			}
		}
	}
	.center {
		text-align: center;
		display: flex;
		justify-content: center;
	}
}
</style>
